<script lang="ts" setup>
import useModal from '@/hooks/useModal'
import SelectUploadList from './SelectUploadList.vue'
const props = withDefaults(defineProps<{ list: string; limit?: number; disabled?: boolean }>(), {
  limit: 1,
  disabled: false,
})
const emit = defineEmits(['update:show', 'reset', 'confirm', 'update:value'])
const { store } = useModal()
const _list = computed(() => props.list.split(',').filter(Boolean))
const handleRemove = index => {
  if (props.disabled) return
  const list = props.list.split(',')
  list.splice(index, 1)
  emit('update:value', list.join(','))
}
const onConfirm = (imgs: string[]) => {
  let list = props.list.split(',').filter(Boolean)
  list = list.concat(imgs)
  if (list.length > props.limit) {
    list.splice(props.limit)
  }
  emit('update:value', list.join(','))
}
const onClick = () => {
  if (props.disabled) return
  store.handleShow({})
}
</script>
<template>
  <div>
    <div class="upload-container flex-w" :class="{ disabled: $props.disabled }">
      <div class="item" v-for="(item, index) in _list">
        <div class="icon" @click="handleRemove(index)">
          <icon-close-circle-fill size="20" />
        </div>
        <a-image :src="item" width="50" height="50" />
      </div>
      <div class="upload flex" @click="onClick" v-if="_list.length != props.limit">
        <icon-plus style="margin: auto" />
      </div>
    </div>
    <SelectUploadList v-if="store.show" v-model:show="store.show" @confirm="onConfirm" :limit="props.limit" />
  </div>
</template>
<style lang="less" scoped>
.upload-container {
  cursor: pointer;

  &.disabled {
    cursor: not-allowed;
  }
  .item {
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    .icon {
      position: absolute;
      background: white;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 21px;
      height: 21px;
      z-index: 233;
    }
  }
  .upload {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dotted rgba(0, 0, 0, 0.1);
  }
}
</style>
